<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: #000;
      animation: move 3s infinite alternate backwards;
    }


    @keyframes move {
      0% {
        background: red;
      }
      33.333% {
        margin-left: 200px;
        margin-top: 0;
      }
      66.6667% {
        margin-left: 200px;
        margin-top: 200px;
      }
      100% {
        margin-left: 0;
        margin-top: 200px;
      }
    }

  
  </style>
</head>
<body>
  <!-- 
    animation-name
      动画名（需要事先使用@keyframs创建）
    animation-duration
      动画时间
    animation-timing-function
      动画曲线（和过渡曲线一样）
      ease 
      linear
      ease-in
      ease-out
      ease-in-out
      自定义函数
    animation-delay
      动画延迟时间
    animation-iteration-count
      动画播放次数
      默认值为 1 表示播放1次 
      可以写数字 表示播放的次数
      如果想要无限次播放 使用infinite
    animation-direction
      动画播放的顺序
      normal 默认值 正常顺序播放
      reverse  倒序播放
      alternate  先顺序 再 倒序
      alternate-reverse  先倒序再顺序
    animation-fill-mode
      动画填充的模式
      forwards  当动画结束时，元素应用当前样式（动画结束时的样式）
      backwards 当有正数的延迟时间时，不加backwards等待元素应用的是初始样式，加上则应用0%的样式
      both 两者都
      更多的会去使用forwards

    animation-play-state
      动画播放状态 一般使用js控制
      paused   暂停
      running  播放

      DOM.style.animationPlayState = '状态'

  -->
  <div></div>
</body>
</html>